<template>
	<view>
		<view class="tgm">
			
			<view class="tgm_t">
			<view class="tgm_title">
				达人邀请二维码
			</view>
			<view class="img">
				
				<!-- <image src="../../static/index/ewm.png" class="w342" mode=""></image> -->
				<image :src="img" class="w342" mode=""></image>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AraleQRCode from "arale-qrcode";
	import {
			mapState,
			mapGetters,
			mapMutations
		} from 'vuex'
	export default {
		data() {
			return {
				src:"",
				img:''
			};
		},
		mounted() {
		      this.makeCode();
		  },
		  computed: {
		  	...mapState(['member', 'service_status', 'real_status']),
		  	...mapGetters(['isLogin']),
		  
		  },
	
		  async onShow() {
		  	
		  	console.log(this.member, 'this.member');
		  },

		methods:{
			 //生成二维码方法
			      makeCode() {
			          const result = new AraleQRCode({
			                render: "svg",      // 定义生成的类型 'svg' or 'table dom’
			                text: "https://play.bozhoukeji.cn/h5/#/bundle/pages/settled/settled?pid="+this.member.pid, // 二维码的链接
			                size: 170,      //二维码大小
			          });
			 
			          // 将svg xml文档转换成字符串
			          const svgXml = new XMLSerializer().serializeToString(result);
			 
			          // 将svg字符串转成base64格式，通过 window.btoa方法创建一个 base-64 编码的字符串，进行二次编码解码(encodeURIComponent 字符串进行编码和解码，unescape 进行解码)。
			          const src =
			                "data:image/svg+xml;base64," +
			                window.btoa(unescape(encodeURIComponent(svgXml)));
			          this.src=src
			          // 本地存储图片
			          localStorage.setItem("image", src);
			          this.getImg();
			     },
			 
			      // 获取存储的图片给到页面
			     getImg() {
			         this.img = localStorage.getItem("image");
			         console.log("$$$$", this.img);
			         localStorage.removeItem("image");
			     },
			
			
		}
	}
</script>

<style lang="scss">
	.tgm {
		height: 100vh;
		margin-top: -120rpx;
		background-image: url("../../static/index/bg2.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		position: relative;
	}

	.tgm_t {
		width: 654rpx;
		height: 900rpx;
		position: absolute;
		top: 360rpx;
		right: 50rpx;
		background-image: url("../../static/index/bg3.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
	}
	.img{
		position: absolute;
		top: 218rpx;
		right: 140rpx;
		// width: 374rpx;
		// height: 374rpx;
		padding: 30rpx;
		text-align: center;
		background: #8438FC;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	
	}
	.w342{
		width: 342rpx;
		height: 342rpx;
	}
	.tgm_title{
		margin-top: 100rpx;
	}
</style>